<template>
    <div class="container_login">
        <el-row class="login_row">
            <!-- <el-col :span="12" :xs="0">
            </el-col> -->
            <el-col :span="24" :xs="24">
                <div class="login_box">
                    <h1>立凯科技</h1>
                    <el-form :model="rufrom" label-width="100px" :rules="rules">
                        <el-form-item label="用户名" prop="child_username">
                            <el-input :prefix-icon="User"	 v-model="rufrom.child_username" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input :prefix-icon="Unlock" v-model="rufrom.password" show-password placeholder="请输入密码"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button :loading="loginLoading" :disabled="loginLoading"  type="primary" @click="login">登录</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import type { LoginForm } from "../../api/user/type"
import type { FormRules } from 'element-plus'
import { User, Unlock } from '@element-plus/icons-vue'
// 仓库
import  useUserstate from "@/store/modules/user"
// 路由跳转
import {useRouter } from "vue-router"
// 提示框
import {ElNotification }  from "element-plus"

import local from "../../utils/local"

// 按钮加载效果
let loginLoading = ref(false)
//获取路由器
let $router= useRouter()
// 获取用户仓库
let usestate  = useUserstate()
usestate.clear_token()


let rufrom = reactive<LoginForm>({
    parent_username: 'tyh',
    child_username: 'tyh',
    password: '88888888',
    is_primary:"1"
})

let rules = reactive<FormRules<LoginForm>>({
    child_username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

const login = async () => {
    loginLoading.value = true  
    try {
      await usestate.userLogin(rufrom)
      $router.push('/')
      let hours = local.getHours()
      ElNotification({
        type: 'success',
        title:hours,
        message: '登录成功',
        duration: 2000
      })      
    }catch (error) {
        loginLoading.value = false
        ElNotification({
          type: 'error',
          message: (error as Error).message,
          duration: 2000
        })
        console.log(error)
    }
}


</script>

<style scoped lang="scss">
.container_login {
    width: 100%;
    height: 100vh;
    background-color: #584aa2;

    .login_row {
        width: 80%;
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        .login_box {
            background: #fff;
            border-radius: 10px;
            padding:40px 10px;
            box-sizing: border-box;
            .el-button {
                width: 100%;
                margin-top: 10px;
            }
            h1 {
                text-align: center;
                color: #584aa2;
                font-size: 30px;
                margin-bottom: 20px;
                font-weight: 700;
            }
        }
    }
}
</style>